import React, { PureComponent } from "react";
import { Divider, Row, Col } from "antd";
import { Link } from "react-router-dom";
import "antd/dist/antd.css";
import "../common/resItem.css";

export default class ContainerItem extends PureComponent {
  render() {
    const { floor } = this.props;
    return (
      <div>
        <Row>
          <Col span={24}>
            <Divider />
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-between",
                alignItems: "center"
              }}
            >
              <h3>{floor.title}</h3>
              <Link
                to={{
                  pathname: "/retailers/column",
                  state: {
                    floorid: floor.id,
                    keyword: "ALL"
                  }
                }}
                style={{ marginRight: 30 }}
              >
                查看更多》
              </Link>
            </div>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <div style={{ display: "flex", flexDirection: "row" }}>
              {floor.ress.map((item, index) => (
                <ResItem key={index} data={item} />
              ))}
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}
class ResItem extends PureComponent {
  render() {
    const { data } = this.props;
    return (
      <div
        className="resItem"
        style={{
          cursor: "pointer",
          padding: 10,
          background: "white",
          flex: 1,
          display: "flex",
          flexDirection: "column",
          borderWidth: 1,
          borderColor: "#EFF2F7",
          borderStyle: "solid"
        }}
      >
        <img
          style={{ width: "100%", height: 100 }}
          src={data.imgs[0] ? data.imgs[0].imgUrl : ""}
          alt=""
        />
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            marginTop: 10
          }}
        >
          <h4>{data.title}</h4>
          <h4 style={{ color: "#FF4949" }}>{data.price}元起</h4>
        </div>
      </div>
    );
  }
}
